<template>
  <el-card shadow="hover" v-loading="loading" class="aui-card--fill">
    <div class="block">
      <span class="demonstration">请选择统计数据年份：</span>
      <el-date-picker v-model="year" size="mini" default-time='2020' type="year" @change='yearChange()' :picker-options="pickerOptions" value-format="yyyy" placeholder="选择年">
      </el-date-picker>
    </div>
    <div class="dashboard-editor-container">
      <panel-group :panelData='this.chartData.statisticsTotal' @handleSetLineChartData="handleSetLineChartData" />
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData" />
      </el-row>

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <pie-chart :PieChartData='this.chartData.statisticsServiceFeeRate' :className="'1'" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <pie-chart :PieChartData=' this.chartData.statisticsBiddingFeeRate' :className="'2'" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <pie-chart :PieChartData='this.chartData.statisticsEarnestMoneyRate' :className="'3'" />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="chart-wrapper">
            <bar-chart :barChartData='this.chartData.statisticsServiceFee' :className="'1'" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="chart-wrapper">
            <bar-chart :barChartData='this.chartData.statisticsOfficeTotal' :className="'2'" />
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import moment from 'moment'
import PanelGroup from '@/components/project/chart/PanelGroup'
import LineChart from '@/components/project/chart/LineChart'
import BarChart from '@/components/project/chart/BarChart'
import PieChart from '@/components/project/chart/PieChart'
const lineChartData = {
  projectNum: [],
  unitNum: [],
  receivedServiceFee: [],
  nameList: [],
  biddingFee: [],
  receivableFee: [],
  uncollectedServiceFee: []
}
export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    PieChart,
    BarChart
  },
  data () {
    return {
      lineChartData: lineChartData,
      url: '',
      year: '',
      loading: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      chartData: {
        statisticsTotal: {},
        statisticsEarnestMoneyRate: {},
        statisticsServiceFee: {}
      }
    }
  },
  created () {
    this.year = this.moment().format('YYYY')
    this.$nextTick(() => {
      // this.initline()
      this.getData()
    })
  },
  mounted () {
    this.url = window.SITE_CONFIG['apiURL']
  },
  methods: {
    moment,
    yearChange () {
      console.log(this.year)
      this.getData()
    },
    getData () {
      this.loading = true
      this.$http
        .post(`/finance/statistics/statisticsFee/`, { year: this.year })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.loading = false
          // 折线图数据
          var obj = res.data.statisticsOfficeIntraday
          lineChartData.nameList = []
          lineChartData.projectNum = []
          lineChartData.unitNum = []
          lineChartData.receivedServiceFee = []
          lineChartData.biddingFee = []
          lineChartData.receivableFee = []
          lineChartData.uncollectedServiceFee = []
          for (var key in obj) {
            lineChartData.nameList.push(obj[key].deptName)
            lineChartData.projectNum.push(obj[key].statistics.projectNum)
            lineChartData.unitNum.push(obj[key].statistics.unitNum)
            lineChartData.receivedServiceFee.push(
              obj[key].statistics.receivedServiceFee
            )
            lineChartData.biddingFee.push(obj[key].statistics.biddingFee)
            lineChartData.receivableFee.push(obj[key].statistics.receivableFee)
            lineChartData.uncollectedServiceFee.push(
              obj[key].statistics.uncollectedServiceFee
            )
          }
          // 头部整体数据
          this.chartData.statisticsTotal = res.data.statisticsTotal
          // 统计服务费收取方式比例
          this.chartData.statisticsServiceFeeRate = {
            legendData: ['收取招标人费用总额', '收取投标企业费用总额'],
            seriesName: '统计服务费收取方式比例',
            seriesData: [
              {
                value: res.data.statisticsServiceFeeRate.zbrServiceFee,
                name: '收取招标人费用总额'
              },
              {
                value: res.data.statisticsServiceFeeRate.unitServiceFee,
                name: '收取投标企业费用总额'
              }
            ]
          }
          let legendDataArray = []
          res.data.statisticsBiddingFeeRate.forEach((item) => {
            legendDataArray.push(item.name)
          })
          // 统计标书费收取方式比例
          this.chartData.statisticsBiddingFeeRate = {
            legendData: legendDataArray,
            seriesName: '统计标书费收取方式比例',
            seriesData: res.data.statisticsBiddingFeeRate
          }
          // 保证金收取和退费金额比例
          this.chartData.statisticsEarnestMoneyRate = {
            legendData: ['收取金额', '退费金额'],
            seriesName: '保证金收取和退费金额比例',
            seriesData: [
              {
                value: res.data.statisticsEarnestMoneyRate.money,
                name: '收取金额'
              },
              {
                value: res.data.statisticsEarnestMoneyRate.refundMoney,
                name: '退费金额'
              }
            ]
          }

          // 收取服务费
          this.chartData.statisticsServiceFee = {
            title: '收取服务费',
            seriesData: [
              {
                name: '从招标人收取服务费',
                data: []
              },
              {
                name: '从投标企业收取服务费',
                data: []
              }
            ],
            xAxisNameData: []
          }
          res.data.statisticsServiceFee.map(item => {
            this.chartData.statisticsServiceFee.xAxisNameData.push(
              item.deptName
            )
            this.chartData.statisticsServiceFee.seriesData[0].data.push(
              item.statistics.zbrServiceFee
            )
            this.chartData.statisticsServiceFee.seriesData[1].data.push(
              item.statistics.unitServiceFee
            )
          })
          // 统计各办事处
          this.chartData.statisticsOfficeTotal = {
            title: '统计各办事处',
            seriesData: [
              {
                name: '项目总数',
                data: []
              },
              {
                name: '投标企业总数',
                data: []
              },
              {
                name: '标书费收取总额',
                data: []
              },
              {
                name: '服务费总数',
                data: []
              },
              {
                name: '应收服务费',
                data: []
              },
              {
                name: '未收服务费',
                data: []
              }
            ],
            xAxisNameData: []
          }
          res.data.statisticsOfficeTotal.map(item => {
            this.chartData.statisticsOfficeTotal.xAxisNameData.push(
              item.deptName
            )
            this.chartData.statisticsOfficeTotal.seriesData[0].data.push(
              item.statistics.projectNum
            )
            this.chartData.statisticsOfficeTotal.seriesData[1].data.push(
              item.statistics.unitNum
            )
            this.chartData.statisticsOfficeTotal.seriesData[2].data.push(
              item.statistics.biddingFee
            )
            this.chartData.statisticsOfficeTotal.seriesData[3].data.push(
              item.statistics.receivedServiceFee
            )
            this.chartData.statisticsOfficeTotal.seriesData[4].data.push(
              item.statistics.receivableFee
            )
            this.chartData.statisticsOfficeTotal.seriesData[5].data.push(
              item.statistics.uncollectedServiceFee
            )
          })
        })
        .catch(() => {})
    },
    handleSetLineChartData () {
      // this.lineChartData = lineChartData
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
.block {
  margin: 0 0 20px;
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
